<template>
    <div id="mapDiv">
    </div>
</template>

<script>
const jsonData = require('./610428.json')
import * as echarts from "echarts";
import { pointImg } from './img.js'
import "echarts-gl";
export default {
    props: ['compenyData'],
    data() {
        return {
            map: null,
            hookToolTip: {},
            imgurl: require('../assets/tipbutton.png'),
            customerBatteryCityData: [],
            myChart: null,
            index: 0,//开始下标
            interval: 3000, // 时间间隔毫秒数
            timer: null,
            nameData: []
        }
    },
    watch: {
        hookToolTip: function (name) {
            document.querySelector("#btn-tooltip").addEventListener("click", (e) => {
                this.$emit('digChange',e.target.dataset.query)
            })
        },
        compenyData: {
            handler(newValue) {
                let data = newValue
                data.forEach(v => {
                    v.fruitProd = JSON.parse(v.fruitProd)
                    if (v.fruitProd && v.fruitProd.coordinate) {
                        this.customerBatteryCityData.push(v)
                    }
                })
                this.initTdtMap()
                this.setIntervalMyChart()
                // 鼠标划入
                this.mouseEvents();
            },
            // immediate:true
        }
    },
    methods: {
        initTdtMap() {
            this.myChart = echarts.getInstanceByDom(document.getElementById("mapDiv"));
            if (this.myChart == undefined) {
                this.myChart = echarts.init(document.getElementById("mapDiv"));
            }
            this.myChart.clear();
            echarts.registerMap('长武县', jsonData);
            this.nameData = jsonData.features.map((item) => {
                return {
                    name: item.properties.name,
                };
            });
            var img2 = pointImg
            let option = {
                tooltip: {
                    trigger: 'item',
                    triggerOn: 'click',
                    className: 'custom-tooltip',
                    appendToBody: true,
                    enterable: true,
                    confine: false,
                    formatter: (item) => {
                        if (item.componentSubType != "scatter") return
                        this.hookToolTip = item
                        var tipHtml = `<div style='margin:.28rem 0 0 .35rem;color:#fff;'>`
                            + `<p style='display:flex;justify-content: space-between;font-size: 18px;font-weight: 600;'><span>${item.data[2].name}</span><img style='width:20px;height:20px;margin-right:80px;' src='${item.data[2].logoImg}' /></p>`
                            + `<span style='display:block;font-size: 14px;font-weight: 400;margin-top:16px;'>产业园地址：` + item.data[2].address + '</span>'
                            + `<span style='display:block;font-size: 14px;font-weight: 400;margin-top:13px;'>产业园负责人：` + item.data[2].operateName + '</span>'
                            + `<span style='display:block;font-size: 14px;font-weight: 400;margin-top:13px;'>产业园产量：` + item.data[2].fruitProd.prodNum + '万吨</span>'
                            + `<span style='display:block;font-size: 14px;font-weight: 400;margin-top:13px;'>产业园产值：` + item.data[2].fruitProd.prodVal + '亿元</span>'
                            + `<div class='utlto'  id='btn-tooltip' data-query='${item.data[2].fruitProd.url}'>跳转果园</div>` +
                            '</div>';
                        return tipHtml;
                    },
                },
                geo: [
                    {
                        map: "长武县",
                        name: "顶部",
                        aspectScale: 1,
                        zoom: 0.65,
                        layoutCenter: ["50%", "50%"],
                        layoutSize: "120%",
                        show: true,
                        roam: false,
                        silent: true,
                        emphasis: {
                            show: false,
                        },
                        select: {
                            itemStyle: {
                                color: "red", // 设置地图点击后的颜色
                                areaColor: "rgba(123, 255, 222, 1)"
                            }
                        },
                        regions: [
                            { // 设置点击后高亮
                                name: this.selectName, // 高亮的省份
                                itemStyle: {
                                    areaColor: 'red' // 区域颜色
                                }
                            }
                        ],
                        itemStyle: {
                            borderColor: "#21A880",
                            borderWidth: 2,
                            shadowColor: "#21A880",
                            shadowOffsetY: 10,
                            shadowBlur: 140,
                            areaColor: "transparent",
                        }
                    },
                    // 重影
                    {
                        type: "map",
                        map: "长武县",
                        zlevel: -1,
                        aspectScale: 1,
                        animation: false,
                        zoom: 0.65,
                        layoutCenter: ["50%", "51%"],
                        layoutSize: "120%",
                        roam: false,
                        silent: true,
                        itemStyle: {
                            borderWidth: 1,
                            borderColor: "rgba(17, 149, 216,0.6)",
                            shadowColor: "rgba(172, 122, 255,0.5)",
                            shadowOffsetY: 5,
                            shadowBlur: 15,
                            areaColor: "rgba(5,21,35,0.1)",
                        },
                    },
                    {
                        type: "map",
                        map: "长武县",
                        zlevel: -2,
                        aspectScale: 1,
                        zoom: 0.65,
                        layoutCenter: ["50%", "52%"],
                        layoutSize: "120%",
                        roam: false,
                        silent: true,
                        itemStyle: {
                            borderWidth: 1,
                            borderColor: "rgba(58,149,253,0.6)",
                            shadowColor: "#21A880",
                            shadowOffsetY: 5,
                            shadowBlur: 15,
                            areaColor: "transpercent",
                        },
                    },
                    {
                        type: "map",
                        map: "长武县",
                        zlevel: -3,
                        aspectScale: 1,
                        zoom: 0.65,
                        layoutCenter: ["50%", "53%"],
                        layoutSize: "120%",
                        roam: false,
                        silent: true,
                        itemStyle: {
                            borderWidth: 1,
                            borderColor: "#21A880",
                            shadowColor: "#21A880",
                            shadowOffsetY: 15,
                            shadowBlur: 10,
                            areaColor: "transpercent",
                        },
                    },
                    {
                        type: "map",
                        map: "长武县",
                        zlevel: -4,
                        aspectScale: 1,
                        zoom: 0.65,
                        layoutCenter: ["50%", "54%"],
                        layoutSize: "120%",
                        roam: false,
                        silent: true,
                        itemStyle: {
                            borderWidth: 1,
                            // borderColor: "rgba(11, 43, 97,0.8)",
                            borderColor: "#21A880",
                            shadowColor: "rgba(123, 255, 222, .1)",
                            shadowOffsetY: 15,
                            shadowBlur: 5,
                            areaColor: "rgba(123, 255, 222, .1)",
                        },
                    },
                ],
                series: [
                    // map
                    {
                        name: "长武",
                        type: "map",
                        map: "长武县", // 自定义扩展图表类型
                        aspectScale: 1,
                        zoom: 0.65, // 缩放
                        showLegendSymbol: true,
                        label: {
                            show: true,
                            color: "#E0D525",
                            fontSize: "120%",
                            fontWeight:"600",
                        },
                        itemStyle: {
                            areaColor: {
                                type: "linear",
                                x: 1200,
                                y: 0,
                                x2: 0,
                                y2: 0,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: "rgba(63,84,79,0.1)", // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(63,84,79,1)", // 50% 处的颜色
                                    },
                                ],
                                global: true, // 缺省为 false
                            },
                            borderColor: "#7BFFDD",
                            borderWidth: 3,
                            shadowColor: "rgba(123,255,221,1)",
                            shadowBlur: 15,
                        },
                        emphasis: {
                            // 当鼠标放上
                            label: {
                                color: "#fff",
                            },
                            itemStyle: {
                                borderWidth: 2,
                                borderColor: "#F6FD9C",
                                areaColor: '#E0D525',
                            },
                        },
                        layoutCenter: ["50%", "50%"],
                        layoutSize: "120%",
                        data: this.nameData,
                    },
                    // 柱状体的顶部
                    {
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        geoIndex: 0,
                        zlevel: 5,
                        label: {
                            show: true,
                            formatter: function (params) {
                                var name = params.data[2].abbreviation
                                var text = `{fline|${name}}`
                                return text;
                            },
                            rich: {
                                fline: {
                                    color: 'rgba(255, 228, 50, 1)',
                                    fontSize: 14,
                                    padding: [-47, 0, 0, 0],
                                    fontFamily: "sans-serif",
                                    fontWeight: 400,
                                    textAlign: 'center'
                                },
                            }
                        },
                        itemStyle: {
                            color: '#00FFF6',
                            opacity: 1
                        },
                        symbol: img2,
                        symbolSize: [100, 100],
                        symbolOffset: [0, 0],
                        z: -1,
                        data: this.scatterData()
                    },
                ]
            }
            this.myChart.setOption(option, true);
            this.myChart.off('click'); // 为了不触发两次
            this.myChart.on('click', (e) => {
                if (e.componentSubType != "map") return
                this.$emit('tipChange', e.data)
                console.log(e.data)
            });
        },
        // point
        scatterData() {
            return this.customerBatteryCityData.map((item) => {
                return [Number(item.fruitProd.coordinate.lng), Number(item.fruitProd.coordinate.lat), item]
            })
        },
        // 设置轮播
        setIntervalMyChart() {
            this.dispatchActionChart("highlight", this.index);
            const dataLength = this.nameData.length;
            // 每隔 interval 进行一次切换
            this.timer = setInterval(() => {
                // 清除高亮跟提示
                this.dispatchActionChart("downplay", this.index);
                this.$emit('tipChange', this.nameData[this.index==-1?0:this.index])
                // 索引增加
                this.index++;
                // 激活高亮跟提示
                this.dispatchActionChart("highlight", this.index);
                this.$emit('tipChange', this.nameData[this.index])
                if (this.index === dataLength - 1) {
                    // 需要对最后一个进行清除，对第一个进行激活
                    let tempTimer = setTimeout(() => {
                        this.dispatchActionChart("downplay", dataLength - 1);
                        this.$emit('tipChange', this.nameData[0])
                        clearTimeout(tempTimer);
                    }, this.interval);
                    this.index = -1;
                }
            }, this.interval);
        },
        // 鼠标划入
        mouseEvents() {
            this.myChart.on("mouseover", () => {
                // 停止定时器，清除之前的高亮
                clearInterval(this.timer);
                this.dispatchActionChart("downplay", this.index);
            });
            // 鼠标划出重新定时器开始
            this.myChart.on("mouseout", () => {
                clearInterval(this.timer);
                // 启动轮播
                this.setIntervalMyChart();
            });
        },
        /**
         * @description 控制高亮跟提示
         * @param {String} type （highlight：高亮（反：downplay）；showTip：显示提示（反：hideTip））
         * @param {Number} dataIndex 数据项的 index
         * */
        //高亮
        dispatchActionChart(type, dataIndex) {
            this.myChart.dispatchAction({
                type: type,
                seriesIndex: 0,
                dataIndex: dataIndex,
            });
        },
    }
}
</script>
<style lang="less" scoped>
#mapDiv {
    width: 100%;
    height: 100%;
    position: relative;
}
</style>
<style>
.custom-tooltip {
    padding: 0 !important;
    border: none !important;
    display: none;
    background-color: transparent !important;
    top: 0;
    left: 0;
    width: 400px;
    height: 305px;
    background-image: url('../assets/tooltip-bgc.png');
    background-size: 100% 100%;
    z-index: 999999;

    .utlto {
        width: 88px;
        height: 33px;
        background: url("../assets/tipbutton.png");
        background-size: cover;
        position: absolute;
        right: 40px;
        bottom: 60px;
        text-align: center;
        line-height: 33px;
        cursor: pointer;
    }
}
</style>
